<template>
	<div><div>

    <my-component></my-component>
  
    <child message="hello!"></child>

    <p><input v-model="parentMsg"></p>
    <child v-bind:message="parentMsg"></child><br>
    <child v-for="(msg,key) in msgs" :key="key" v-bind:message="' '+key+':'+msg"></child>

    <example :propA="1" propB="2" propC="3" :propF="30"></example>

    <p>total:{{ total }}</p>
    <button-counter v-on:inc="incTotal"></button-counter>
    <button-counter v-on:inc="incTotal"></button-counter>

    <child01></child01>
    <child01>这是父组件内容分发的内容</child01>

    <div id="app" @click="i++">
      <component v-bind:is="currentView">
      <!-- 组件在 currentview 变化时改变！ -->
      </component>
    </div>

	</div></div>

</template>

<script>

export default {
  data () { 
    return { 
      parentMsg: '父组件内容',
      msgs:['A','B','C'],
      total:0, 
      i:1    
    } 
  },
  methods: {
    incTotal: function () { this.total += 1; }
  },
  computed:{
      currentView () {
          if(this.i>3) this.i=1;
          return 'page'+this.i;
      }
  },
  components: {
    //<my-component> 将只在父模板可用
    'my-component': {
      template: '<h1>自定义组件!</h1>'
    },
    'child': {
      // 声明 props
      props: ['message'],
      // 同样也可以在 vm 实例中像 "this.message" 这样使用
      template: '<span>{{ message }}</span>'
    },
    'example': {      
      props: {
        // 基础类型检测 （`null` 意思是任何类型都可以）
        propA: Number,
        // 多种类型
        propB: [String, Number],
        // 必传且是字符串
        propC: {
          type: String,
          required: true
        },
        // 数字，有默认值
        propD: {
          type: Number,
          default: 100
        },
        // 数组／对象的默认值应当由一个工厂函数返回
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
            return value > 10
          }
        }
      },
      template:'<div><p>{{propA}}</p><p>{{propB}}</p><p>{{propC}}</p><p>{{propD}}</p><p>{{propE}}</p><p>{{propF}}</p></div>'
    },
    'button-counter': {
      template: '<button v-on:click="inc">{{ counter }}</button>',
      data: function () {//注意组件内部data必须使用工厂函数
        return { counter: 0 };
      },
      methods: {
        inc: function () {
          this.counter += 1
          this.$emit('inc')
        }
      }
    },
    'child01': {template: '<div><h2>我是子组件的标题</h2><slot>组件默认内容</slot></div>'},
    page1: { template:'<p>页面一</p>' },
    page2: { template:'<p>页面二</p>' },
    page3: { template:'<p>页面三</p>' }   
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  width: 100px;
  height: 100px;
  background: green;
}
.text-danger {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
